<template>
    <el-tabs v-model="activeName" type="card">
        <el-tab-pane :label="$i18n.t('FOLLOW_RECORD')" name="followRecord">
            <follow-record v-if="activeName === 'followRecord'" />
        </el-tab-pane>
        <el-tab-pane :label="$i18n.t('LOANED_TRACK')" name="loanedTrack">
            <loaned-track v-if="activeName === 'loanedTrack'" />
        </el-tab-pane>
        <el-tab-pane :label="$i18n.t('TEL_RECORD')" name="callRecord">
            <loaned-call-record v-if="activeName === 'callRecord'"></loaned-call-record>
        </el-tab-pane>
        <el-tab-pane :label="$i18n.t('SMS_RECORD')" name="SMSRecord">
            <loaned-s-m-s-record v-if="activeName === 'SMSRecord'"></loaned-s-m-s-record>
        </el-tab-pane>
        <el-tab-pane :label="$i18n.t('TEL_APPROVE')" name="TELApprove">
            <loaned-tel-approve v-if="activeName === 'TELApprove'" />
        </el-tab-pane>
        <el-tab-pane :label="$i18n.t('REPAYMENT_PLAN')" name="repaymentPlan">
            <loaned-repayment-plan v-if="activeName === 'repaymentPlan'"></loaned-repayment-plan>
        </el-tab-pane>
        <el-tab-pane :label="$i18n.t('REPAYMENT_RECORD')" name="repaymentRecord">
            <loaned-repayment-record v-if="activeName === 'repaymentRecord'"></loaned-repayment-record>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
    import FollowRecord from '@/views/loaned/components/HistoryRecord/FollowRecord'
    import LoanedTrack from '@/views/loaned/components/HistoryRecord/LoanedTrack'
    import LoanedCallRecord from '@/views/loaned/components/HistoryRecord/CallRecord'
    import LoanedTelApprove from '@/views/loaned/components/HistoryRecord/TELApprove'
    import LoanedRepaymentPlan from '@/views/loaned/components/HistoryRecord/RepaymentPlan'
    import LoanedRepaymentRecord from '@/views/loaned/components/HistoryRecord/RepaymentRecord'
    import LoanedSMSRecord from '@/views/loaned/components/HistoryRecord/SMSRecord'

    export default {
        name: 'loanedHistoryRecord',
        components: { LoanedSMSRecord, LoanedRepaymentRecord, LoanedRepaymentPlan, LoanedTelApprove, LoanedCallRecord, LoanedTrack, FollowRecord },
        data () {
            return {
                activeName: 'followRecord'
            }
        }
    }
</script>

<style scoped>

</style>
